<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        @font-face {
            font-family: "mind-demi-bold";
            src: url("font/NeverMind-DemiBold.ttf")
        }
    </style>
</head>

<body>
    <video id="video" src="video/video.mp4" autoplay loop muted></video>
    <div class="container">
        
        <div class="container-col">
            <div class="d-text time flex-center">
                <span id="hour"></span>
                :
                <span id="minute"></span>
                :
                <span id="second"></span>
            </div>
            <div class="date-info flex-center">
                <div class="flex-center" style="width: 100%;height: 100%;flex-direction: column;">
                    <span id="curDay"></span>
                    <span id="week"></span>
                </div>
                <div class="flex-center" style="width: 100%;height: 100%;flex-direction: column;">
                    <span id="date"></span>
                    <span id="day"></span>
                </div>
            </div>
            <div id="weather"></div>
        </div>
        <!-- <div class="container-bottom">
            <div>
                <img class="img-left"
                    src="">
                <span id="content" class="d-text" style="font-size: 18px;"></span>
                <img class="img-right"
                    src="">
            </div>
            <div id="source" class="d-text" style="margin: 16px 0 10px;opacity: 0.65;"></div>
            <div class="flex-center">
                <span class="d-text line"></span>
                <span id="author" class="d-text" style="opacity: 0.65;"></span>
                <span class="d-text line"></span>
            </div>
        </div> -->
        <div id="mhys" class="mhys-div">
            此刻梅花易数:<br/>
            <div style="display: none;">
                数字1：<input id='shuzi1'></input>
                数字2：<input id='shuzi2'></input>
                <br>
                <button onclick='suan()'>-------算-------</button>
            </div>

            <div id="id1"></div>

            <div>
                <canvas width="250px" height="200px" id="gua"></canvas>
            </div>

            <div id="id2">

            </div>
        </div>
    </div>
    <script src='js/time.js'></script>
    <script src='js/jquery.min.js'></script>
    <script src="js/lunar-calendar.js"></script>
    <script src="js/data.js"></script>
    <script>
        $(function () {
            var curMinute = '00';
            // 每隔1秒更新一次时间。  
            setInterval(updateTime, 1000);
            function updateTime() {
                let times = getTime();
                $("#hour").text(times[0]);
                $("#minute").text(times[1]);
                $("#second").text(times[2]);
                $("#date").text(getDate('ym'));
                $("#curDay").text(getDate('day'));
                $("#week").text(getWeekday());
                if (curMinute != times[1]) {
                    updateContent();
                    curMinute = times[1];
                }
            }
            setTimeout(() => {
                $('.time').css('display', 'inline-block')
                // 获取当前日期的农历
                var currentDate = new Date();
                var lunarDate = LunarCalendar.solarToLunar(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
                $("#day").text(lunarDate.lunarMonthName + lunarDate.lunarDayName);
                //设置梅花易数
                //debugger
                mhysFun(lunarDate);
            }, 1000);

            // 天气信息
            // $.ajax({
            //     url: 'https://query.asilu.com/weather/baidu?city=合肥',
            //     method: 'GET',
            //     dataType: 'json',
            //     success: function(response) {
            //         // 请求成功的回调函数
            //         $("#weather").text(response.weather[0].temp + "    " + response.weather[0].weather + "   " + response.weather[0].wind + "（" + response.city + "）");
            //     },
            //     error: function(xhr, status, error) {
            //         // 请求失败的回调函数
            //         console.error(error);
            //     }
            // });
        })

        function mhysFun(lunarDate) {
            //数字1
            var time = getTime();
            var d1 = lunarDate.lunarYear + lunarDate.lunarMonth + lunarDate.lunarDay;
            var d2 = lunarDate.lunarYear + lunarDate.lunarMonth + lunarDate.lunarDay + time[0];
            $("#shuzi1").val(d1 % 8);
            $("#shuzi2").val(d2 % 8);
            console.log(lunarDate, d1, d2, getTime());
            huagua($("#shuzi1").val(), $("#shuzi2").val());
        }

        function updateContent() {
            // 获取随机数 0- dataList.length
            var randomInt = Math.floor(Math.random() * dataList.length);
            $("#content").text(dataList[randomInt].content);
            $("#author").text(dataList[randomInt].author);
            $("#source").text("《" + dataList[randomInt].source + "》");
        }

        //梅花易数
        var shangguashuzi;
        var xiaguashuzi;
        var bengua;
        var dongyao;
        var hugua;
        var biangua;
        var baguashuzi = [
            "111",
            "011",
            "101",
            "001",
            "110",
            "010",
            "100",
            "000"
        ];
        function suan() {
            var shuzi1 = document.getElementById("shuzi1").value;
            var shuzi2 = document.getElementById("shuzi2").value;
            huagua(shuzi1, shuzi2);
        }

        function jisuangua(shuzi1, shuzi2) {
            shangguashuzi = shuzi1 % 8 == 0 ? 8 : shuzi1 % 8;
            xiaguashuzi = shuzi2 % 8 == 0 ? 8 : shuzi2 % 8;
            return baguashuzi[shangguashuzi - 1] + baguashuzi[xiaguashuzi - 1]
        }

        function huagua(shuzi1, shuzi2) {

            var gua = document.getElementById('gua');
            var ctx = gua.getContext('2d');
            gua.height = gua.height;

            //本卦
            bengua = jisuangua(shuzi1, shuzi2);
            huizhi(ctx, bengua, 10);

            //互卦
            hugua = bengua.substr(0, 1) + bengua.substr(3, 2) + bengua.substr(1, 2) + bengua.substr(5, 1);
            huizhi(ctx, hugua, 90);


            //变卦
            dongyao = (parseInt(shuzi1) + parseInt(shuzi2)) % 6;
            if (dongyao == 0) {
                dongyao = 6
            }
            biangua = bengua;
            biangua = biangua.substr(0, 6 - dongyao) + (biangua.substr(0 - dongyao, 1) == 1 ? 0 : 1) + biangua.substr(7 - dongyao, biangua.length)
            //alert('动爻：'+dongyao+'互卦:'+biangua)
            huizhi(ctx, biangua, 170);

            guazi(ctx, bengua, hugua, biangua);
        }

        function huizhi(ctx, guashuzi, x) {
            for (var i = 1; i < 7; i++) {
                ctx.fillStyle = "rgb(0,0,0)";
                //透明
                ctx.globalAlpha ='0.618';
                if (guashuzi.substring(i - 1, i) == 1) {
                    ctx.fillRect(x, (2 * i - 1) * 10, 50, 10);
                } else {
                    ctx.fillRect(x, (2 * i - 1) * 10, 20, 10);
                    ctx.fillRect(x + 30, (2 * i - 1) * 10, 20, 10);
                }
            }
        }

        function guazi(ctx, bengua, hugua, biangua) {
            ctx.font = "17px Arial";
            ctx.fillText("本卦", 17, 150);
            ctx.fillText("互卦", 97, 150);
            ctx.fillText("变卦", 177, 150);
            //alert(guamap.get(bengua)+guamap.get(hugua)+guamap.get(biangua))
            ctx.fillText(guamap.get(bengua), 17, 180);
            ctx.fillText(guamap.get(hugua), 97, 180);
            ctx.fillText(guamap.get(biangua), 177, 180);
        }

        var guamap = new Map();
        guamap.set('111111', '乾为天');
        guamap.set('111011', '天泽履');
        guamap.set('111101', '天火同人');
        guamap.set('111001', '天雷无妄');
        guamap.set('111110', '天风姤');
        guamap.set('111010', '天水讼');
        guamap.set('111100', '天山遁');
        guamap.set('111000', '天地否');
        guamap.set('011111', '泽天夬');
        guamap.set('011011', '兑为泽');
        guamap.set('011101', '泽火革');
        guamap.set('011001', '泽雷随');
        guamap.set('011110', '泽风大过');
        guamap.set('011010', '泽水困');
        guamap.set('011100', '泽山咸');
        guamap.set('011000', '泽地萃');
        guamap.set('101111', '火山大有');
        guamap.set('101011', '火泽睽');
        guamap.set('101101', '离为火');
        guamap.set('101001', '火雷噬嗑');
        guamap.set('101110', '火风鼎');
        guamap.set('101010', '火水未济');
        guamap.set('101100', '火山旅');
        guamap.set('101000', '火地晋');
        guamap.set('001111', '雷天大壮');
        guamap.set('001011', '雷泽归妹');
        guamap.set('001101', '雷火丰');
        guamap.set('001001', '震为雷');
        guamap.set('001110', '雷风恒');
        guamap.set('001010', '雷水解');
        guamap.set('001100', '雷山小过');
        guamap.set('001000', '雷地豫');
        guamap.set('110111', '风天小蓄');
        guamap.set('110011', '风泽中孚');
        guamap.set('110101', '烽火人家');
        guamap.set('110001', '风雷益');
        guamap.set('110110', '巽为风');
        guamap.set('110010', '风水涣');
        guamap.set('110100', '风山渐');
        guamap.set('110000', '风地观');
        guamap.set('010111', '水天需');
        guamap.set('010011', '水泽节');
        guamap.set('010101', '水火既济');
        guamap.set('010001', '水雷屯');
        guamap.set('010110', '水封井');
        guamap.set('010010', '坎为水');
        guamap.set('010100', '水山蹇');
        guamap.set('010000', '水地比');
        guamap.set('100111', '山天大畜');
        guamap.set('100011', '山泽损');
        guamap.set('100101', '山火贲');
        guamap.set('100001', '山雷颐');
        guamap.set('100110', '山风蛊');
        guamap.set('100010', '山水蒙');
        guamap.set('100100', '艮为山');
        guamap.set('100000', '山地剥');
        guamap.set('000111', '地天泰');
        guamap.set('000011', '地泽临');
        guamap.set('000101', '地火明夷');
        guamap.set('000001', '地雷复');
        guamap.set('000110', '地风升');
        guamap.set('000010', '地水师');
        guamap.set('000100', '地山谦');
        guamap.set('000000', '地为坤');

    </script>
</body>

</html>